<template>
    <h1>APP 组件</h1>
    <hr />
    <h1>原价: {{ price }} <button @click="changePrice">修改原价</button></h1>
    <h1>会员价: {{ vipPrice }} <button @click="changeVipPrice">修改会员价</button></h1>
    <h1>超级会员价: {{ sVipPrice }}</h1>
</template>

<script setup>
import { ref, computed } from "vue";

const price = ref(1000);

// 最常见的 计算属性写法, 但是这种写法 不允许修改 计算属性的值
// const vipPrice = computed(() => {
//     return price.value / 2;
// });
const vipPrice = computed({
    get () {
        return price.value / 2
    },
    set (val) {
        // console.log('你想修改 计算属性, 修改的值: ', val)
        price.value = val * 2
    }
})

const sVipPrice = computed(() => {
    return price.value * 0.1;
});

// 修改原价
function changePrice() {
    price.value = 100;
}

// 修改 vip 价格
function changeVipPrice () {
    // console.log(vipPrice)
    vipPrice.value = 1000
}
</script>

<style></style>
